<template>
    <div id="thousand">
        <!--头部-->
        <div class="head">
            <span class="iconfont" onclick="javascript :history.go(-1);">&#xe602;</span>
            <div class="title-img">
                <a href="/">
                    <img src="./images/header_title.png" alt="">
                </a>
            </div>
        </div>

        <!--四个项目-->
        <nav class="w">
            <ul>
                <li>
                    <a href="javascript:void(0);" class="clearfix">
                        <img src="./images/nav01.jpg" alt="">
                        <h2 class="f_left">我呀便当</h2>
                        <span class="f_right"><img src="./images/authentication.png" alt="">企业认证</span>
                        <p>投资金额：<i>3-5万</i></p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);" class="clearfix">
                        <img src="./images/nav02.jpg" alt="">
                        <h2 class="f_left">韩巴巴炸鸡</h2>
                        <span class="f_right"><img src="./images/authentication.png" alt="">企业认证</span>
                        <p>投资金额：<i>1-5万</i></p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);" class="clearfix">
                        <img src="./images/nav03.jpg" alt="">
                        <h2 class="f_left">粥员外</h2>
                        <span class="f_right"><img src="./images/authentication.png" alt="">企业认证</span>
                        <p>投资金额：<i>3-5万</i></p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);" class="clearfix">
                        <img src="./images/nav04.jpg" alt="">
                        <h2 class="f_left">酸菜鱼米饭</h2>
                        <span class="f_right"><img src="./images/authentication.png" alt="">企业认证</span>
                        <p>投资金额：<i>1-5万</i></p>
                    </a>
                </li>
            </ul>
        </nav>

        <!--猜你喜欢-->
        <div class="like">
            <!--标题-->
            <div class="like-title">

            </div>

            <!--内容-->
            <ul class="hot-cont">
                <li class="w">
                    <img src="./images/hot01.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">韩巴巴炸鸡店</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <p>所属分类：<i>炸鸡</i></p>
                        <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="./images/hot02.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">暖小稻</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <p>所属分类：<i>黄焖鸡</i></p>
                        <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="./images/hot03.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">灶掌柜</h2>
                        <span>外卖</span>
                        <span>堂食</span>
                        <span>现炒</span>
                        <p>所属分类：<i>家常菜</i></p>
                        <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
                <li class="w">
                    <img src="./images/hot04.png" alt="">
                    <div class="r-cont clearfix">
                        <h2 class="">湘口福酸菜鱼</h2>
                        <span>外卖</span>
                        <span>米饭</span>
                        <p>所属分类：<i>酸菜鱼</i></p>
                        <p><img src="./images/money.png" alt=""><i>5~10万</i></p>
                        <p>月资讯人数：<i>242</i>人</p>
                        <a href="javascript:void(0);">询底价</a>
                    </div>
                </li>
            </ul>
            <a href="javascript:void(0);" class="load-more">加载更多项目</a>

        </div>
        <foot></foot>
    </div>
</template>

<script>
    import foot from "@/components/foot/foot"

    export default {
        name: "Thousand",
        data() {
            return {}
        },
        methods: {},
        components: {
            foot
        }
    }
</script>

<style scoped lang="less">
    .head {
        //width: 100%;
        width: 3.325rem;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 0.5rem;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .1);
        background-color: #fff;
        z-index: 999;

        span {
            position: absolute;
            top: 0.15rem;
            left: 0;
        }

        .title-img {
            width: 1.1rem;
            margin: 0 auto;
            padding-top: 0.15rem;

            a {
                display: block;
                width: 100%;
                height: 100%;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: -0.21rem;
            width: 0.22rem;
            height: 100%;
            background-color: #fff;
            z-index: 9999;
        }

        &::before {
            content: "";
            position: absolute;
            top: 0;
            right: -0.11rem;
            width: 0.22rem;
            height: 100%;
            background-color: #fff;
            z-index: 9999;
        }
    }

    /* 四个项目 */
    nav {
        margin-top: 0.675rem;

        ul {
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap;

            li {
                flex: 0 0 48%;
                border-radius: 0.05rem;
                padding-bottom: 0.06rem;
                margin-bottom: 0.215rem;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    img {
                        display: block;
                        width: 100%;
                    }

                    h2 {
                        color: #333;
                        font-size: 0.15rem;
                        margin-top: 0.1rem;
                        margin-left: 0.075rem;
                    }

                    span {
                        color: #ff813c;
                        font-size: 0.1rem;
                        //vertical-align: middle;
                        margin-top: 0.075rem;
                        //line-height: 0.12rem;
                        margin-right: 0.1rem;

                        img {
                            display: inline-block;
                            width: 0.1rem;
                            height: 0.12rem;
                            vertical-align: text-bottom;
                            margin-right: 0.035rem;
                        }
                    }

                    p {
                        clear: both;
                        font-size: 10px;
                        color: #666;
                        margin-bottom: 0;
                        margin-left: 0.075rem;

                        i {
                            color: #f91b0c;
                        }
                    }
                }
            }
        }
    }

    /* 猜你喜欢 */
    .like {
        /* 标题 */

        .like-title {
            height: 0.11rem;
            background: url("./images/like_title_img.png") no-repeat center center;
            background-size: contain;
        }

        /* 热门项目 */

        /* 标题 */

        .hot-title {
            border-bottom: 1px solid #e1dede;
            //padding-bottom: 0.15rem;
            li {
                display: inline-block;
                border-bottom: 2px solid #fe1818;
                padding-bottom: 0.15rem;
            }
        }

        /* 内容 */

        .hot-cont {
            li {
                padding-top: 0.15rem;
                padding-bottom: 0.135rem;
                border-bottom: 1px solid #e1dede;
                position: relative;
                //display: flex;
                //justify-content: space-between;

                img {
                    height: 1.055rem;
                    display: inline-block;
                    margin-right: 0.1rem;
                    vertical-align: middle;
                }

                .r-cont {
                    display: inline-block;
                    vertical-align: middle;
                    //font-size: 0;

                    h2 {
                        font-size: 15px;
                        color: #333;
                        display: inline-block;
                        margin-right: 0.05rem;
                        margin-bottom: 0.07rem;
                        margin-top: 0;
                    }

                    span {
                        font-size: 0.11rem;
                        color: #fd8815;
                        padding: 0.02rem 0.03rem;
                        border-radius: 15px;
                        border: solid 1px #ff9126;
                        margin-right: 0.05rem;
                    }

                    p {
                        font-size: 12px;
                        line-height: 12px;

                        &:nth-of-type(1) {
                            color: #999;
                        }

                        &:nth-of-type(2) {
                            margin-top: .07rem;
                            margin-bottom: .07rem;

                            img {
                                vertical-align: middle;
                                width: 12px;
                                height: 12px;
                                margin-right: 7px;
                            }

                            i {
                                color: #333;
                                vertical-align: middle;
                            }
                        }

                        &:nth-of-type(3) {
                            color: #ff5050;
                        }
                    }

                    a {
                        display: inline-block;
                        padding: 0.065rem 0.15rem;
                        color: #fff;
                        font-size: 12px;
                        background-image: linear-gradient(207deg,
                        #ff4b33 0%,
                        #ff4431 0%,
                        #ff3d2e 0%,
                        #ff2922 54%,
                        #fe1818 100%),
                        linear-gradient(
                                #f65353,
                                #f65353);
                        background-blend-mode: normal,
                        normal;
                        box-shadow: 2px 2px 9px 0 rgba(218, 20, 20, 0.33),
                        inset 0 3px 7px 0 rgba(255, 88, 75, 0.44);
                        border-radius: 25px;
                        position: absolute;
                        bottom: 0.19rem;
                        right: 0.2rem;
                    }
                }
            }
        }

        .load-more {
            display: block;
            font-size: 12px;
            color: #424242;
            padding: 0.17rem 0;
            text-align: center;
        }
    }

</style>